<template>
  <div class="storeinfo">
    <Header title="店铺简介" back />
    <!-- 店铺 -->
    <div class="store_desc">
      <img :src="'http://122.51.249.55:3000/' + storeInfo.store_logo" alt="" />
      <div class="store_word">
        <p>{{ storeInfo.store_name }}</p>
        <p>初级店铺</p>
        <p>商品数量：13</p>
      </div>
      <div class="shoucang">收藏</div>
    </div>
    <!-- 好评率 -->
    <div class="good">
      <p>好评率：100%</p>
      <p>所在地：{{ storeInfo.store_address }}</p>
      <p>开店时间：2016-01-01</p>
      <p>详细地址：华润五彩城购物中心二期13层</p>
    </div>
    <!-- 打分 -->
    <div class="dafen">
      <p>
        描述相符：<span>{{ storeInfo.store_deliverycredit }} </span>
      </p>
      <p>
        服务态度：<span>{{ storeInfo.store_servicecredit }} </span>
      </p>
      <p>
        物流服务：<span>{{ storeInfo.store_desccredit }} </span>
      </p>
    </div>
    <div class="erweima">
      <p>二维码</p>
      <div>
        <img src="@/assets/imgs/erweima.png" alt="" />
        <p>扫描二维码 关注有惊喜</p>
        <button>联系卖家</button>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  components: {
    Header
  },
  data() {
    return {
      storeInfo: {}
    };
  },
  created() {
    this.getStoreInfo();
  },
  methods: {
    async getStoreInfo() {
      let { data: res } = await this.$axios.get("Store/about", {
        params: { store_id: this.$route.params.id }
      });
      this.storeInfo = res.result;
    }
  }
};
</script>

<style lang="less" >
.storeinfo {
  .ct {
    color: #333333;
    font-weight: 700;
    font-family: PingFang-SC-Bold;
  }

  .header .lt[data-v-61dd7a3d] {
    transform: translateY(50%);
    margin-left: 24px;
  }
  .store_desc {
    position: relative;
    display: flex;
    padding: 21px 24px;
    height: 180px;
    margin-bottom: 20px;
    img {
      width: 138px;
      height: 138px;
      border-radius: 50%;
    }
    .store_word {
      margin-left: 30px;
      font-size: 28px;
      color: #333333;
      font-weight: 700;
      p:nth-child(2),
      p:nth-child(3) {
        font-size: 24px;
        color: #999999;
        font-weight: normal;
      }
    }
    .shoucang {
      position: absolute;
      top: 18px;
      right: 24px;
      width: 120px;
      height: 52px;
      text-align: center;
      line-height: 52px;
      background-color: #fc0000;
      border-radius: 26px;
      color: #fff;
      font-size: 32px;
    }
  }
  .good {
    padding: 29px 25px 30px;
    color: #999999;
    font-size: 28px;
    margin-bottom: 20px;
    p {
      line-height: 58px;
    }
  }
  .dafen {
    color: #999999;
    font-size: 28px;
    padding: 0 25px;
    margin-bottom: 20px;
    p {
      line-height: 52px;
      span {
        color: #fc0000;
      }
    }
  }
  .erweima {
    padding: 30px 25px;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 500px;
        height: 500px;
        margin-bottom: 30px;
      }
      p {
        font-size: 30px;
        color: #333333;
      }
      button {
        width: 600px;
        height: 80px;
        background-color: #ff4f02;
        border-radius: 8px;
        border: 0;
        color: #ffffff;
        font-size: 28px;
        margin-top: 76px;
      }
    }
  }
}
</style>
